import { motion } from 'framer-motion'
import { API, BASE_PATH } from "@/config";
import { useEffect, useState } from "react";
import requewt from "@/utils/requewt";
import { AutoCenter } from "antd-mobile"

// const GameApp = dynamic(() =>import('@/components/pages/game/components/car'), {ssr: false})
const GameLayout = ({children}) => {
    const [qrCode, setQrCode] = useState('')
    useEffect(() => {
        requewt(API.user.qrcode).then(({data}) => {
            const { qr_code } = data || {}
            setQrCode(qr_code)
        })
    }, [])
    return (
        <div className="inner share-page">
            <motion.div>
                <motion.img 
                    width='100%'
                    // style={{margin: '6vh 0'}}
                    className='idd-img'
                    src={`${BASE_PATH}/img/game/idd.png`}
                />
            </motion.div>
            <div style={{position: 'absolute',width: '100%'}}>
            {children}
            </div>
            {/* <AutoCenter>
            <p>
                <img 
                src={qrCode}
                
                width={80}
                height={80}
            />
                </p>
            </AutoCenter> */}
            {/* <GameApp category={'1'} sprites={sprites} car={car} /> */}
        </div>
    )
}


export default GameLayout